<template>
    <el-row class="main-cont box box-tb padd20">
        <div class="select">
            <el-select v-model="bj" placeholder="选择班级" @change="selectBj" class="text">
                <el-option v-for="(item,index) in bjList" :key="index" :label="item.label"
                    :value="item.value"></el-option>
            </el-select>
        </div>
        <el-row class="box box-pack-center box-tb">
            <el-col class="tl">
                <h3>实践任务共{{rwList.length}}项</h3>
            </el-col>
            <el-col class="mt20 user-list" v-if="rwList.length != 0">
                <div v-for="(item,i) in rwList" :label="i" :key="i" class="el-box box box-tb">
                    <div class="list box box-pack-between box-align-center">
                        <div class="box box-pack-start box-align-center">
                            <el-image :src="item.img" class="img"></el-image>
                            <div class="ml20 box box-tb box-pack-center box-align-start">
                                <div class="box box-align-center">
                                    <h3>{{item.title}}</h3>
                                    <span class="nopass ml20" v-if="item.wpy != 0">
                                        未批阅 +{{item.wpy}}
                                    </span>
                                </div>
                                <span class="tips mt20">{{item.type}}</span>
                            </div>

                        </div>
                        <div class="box box-tb box-align-end box-pack-around right">
                            <div class="tab mr20">
                                截止提交时间：{{item.endTime}}
                            </div>
                            <div class="icon" v-if="item.wpy != 0" @click="item.wpy != 0?start(item.cltid):''">
                                开始批阅
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col class="height100 box box-pack-center box-align-center" v-else>
                <el-empty description="暂无数据" image="../../../static/image/nodata/nodata.png"></el-empty>
            </el-col>
        </el-row>

    </el-row>
</template>

<script>
    // import Jsondata from '@/json/check.json'
    export default {
        data() {
            return {
                rwList:[],
                bjList:[],
                bj:'',

                // kcmc:this.$route.query.kcmc 需要上页传值
                loginInfo:this.$store.state.loginInfo,
                kcmc: '社会劳动课程',
                tabList: [{
                        title: "课程详情"
                    },
                    {
                        title: "章节目录"
                    }
                ],
                current: 0,
                checkedCities: [],
                cities: [],
                isIndeterminate: true,
                checkAll: false,
                show: false
            };
        },
        mounted() {
            this.trClassListLabel();
        },
        methods: {
            trClassListLabel(){
                let params = {
                    trid:this.loginInfo.user.id
                };
                this.$api.tr.trClassListLabel(params).then(res => {
                    if(res.code == 0){
                        this.bjList = res.list;
                        if(res.list.length !=0){
                            this.bj = res.list[0].value;
                            this.trLdsjChkList();
                        }

                    }else{
                        this.$message.error('请求失败！');
                    }
                })
            },
            trLdsjChkList() {
                let params = {
                    trid:this.loginInfo.user.id,
                    schoolid:this.loginInfo.user.schoolId,
                    classid:this.bj
                };
                this.$api.tr.trLdsjChkList(params).then(res => {
                    if(res.code == 0){
                        this.rwList = res.list;
                    }else{
                        this.$message.error('请求失败！');
                    }
                })
            },
            selectBj(e){
                this.bj = e;
                this.trLdsjChkList();
            },
            start(rwid) {
                localStorage.setItem('classid',this.bj);
                localStorage.setItem('rwid',rwid);
                this.$router.push({
                    path:"/pyrw_tr/kspy"
                })
            }
        }
    };
</script>

<style scoped lang="scss">
    .bgf {
        background-color: #fff;
    }

    .select {
        width: 200px;
        margin-bottom: 20px;
    }


    .right {
        padding-right: 20px;

        .cbs {
            margin-top: 20px;
            width: 140px;
            height: 24px;
            line-height: 24px;
            background: #F3F4FB;
            border-radius: 12px;
            color: #939FF4;
        }

        .zb {
            color: #2F3142;
            font-weight: 600;
        }

        .tab {
            // width: 207px;
            height: 14px;
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 300;
            color: #626BF1;
        }

        .icon {
            width: 102px;
            height: 36px;
            line-height: 36px;
            background: #FF9B4F;
            border-radius: 18px;
            color: #fff;
            cursor: pointer;
            transition: .3s e;

            &:hover {
                box-shadow: 1px 4px 7px 0px rgba(255, 155, 79, 0.4);
            }
        }
    }

    .nopass {
        width: 92px;
        height: 28px;
        line-height: 28px;
        border: 1px solid #FF5A77;
        border-radius: 14px;
        color: #FF5A77;
        font-size: 15px;
        cursor: default;
    }

    .bgf>>>.el-divider--horizontal {
        margin: 0 20px;
        width: auto;
    }

    .row {
        box-sizing: border-box;
    }

    .hg100 {
        height: 100%;
    }

    .shi {
        position: absolute;
        top: 251px;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #fff;
        overflow-y: auto;
    }

    .pub-btn {
        display: inline-block;
        width: 102px;
        height: 42px;
        line-height: 42px;
        background: #FF9B4F;
        border-radius: 11px;
        text-align: center;
        color: #fff;

        &:hover {
            cursor: pointer;
            box-shadow: 1px 4px 7px 0px rgba(255, 155, 79, 0.4);
        }
    }

    .list {
        margin: 10px 0;
        padding: 0 20px;
        box-sizing: border-box;
        width: 100%;
        height: 110px;
        background: #F8F9FC;
        border: 1px solid #fff;
        border-radius: 7px;

        .img {
            width: 110px;
            height: 91px;
        }

        .progress {
            height: 100%;
        }

        h3 {
            font-size: 18px;
        }

        .percent {
            width: 100px;
        }

        .tips {
            color: #888F9E;
        }

        .right {
            height: 100%;

            // width: 200px;


        }
    }

    .detail {
        width: 5px;
    }
</style>
